<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>IP信息</title>
    <meta name="author" content="pxy">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
</head>
<body class="layui-layout-body">
        <table class="layui-hide" id="test" lay-filter="test"></table>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
            </div>
        </script>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <script src="../../layui/layui.all.js" charset="utf-8"></script>
        <script>
            layui.use('table', function () {
                var table = layui.table;
                table.render({
                    elem: '#test'
                    ,
                    url: 'https://www.mxnzp.com/api/ip/self?app_id=sngmqkqxuln6jkik&app_secret=RVV0aDBJbnpIa2k3REdVQmNuaWI2dz09'
                    ,
                    parseData: function (res) {
                        return {
                            "code": 0,
                            "msg": res.message,
                            "count": 1,
                            'data': new Array(res.data)
                        };
                    }
                    ,
                    toolbar: '#toolbarDemo'
                    ,
                    defaultToolbar: ['filter', 'exports', 'print', {
                        title: '提示'
                        , layEvent: 'LAYTABLE_TIPS'
                        , icon: 'layui-icon-tips'
                    }]
                    ,
                    cols: [[
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'ip', width: 200, title: 'IP'}
                        , {field: 'province', width: 100, title: '省份'}
                        , {
                            field: 'provinceId',
                            width: 100,
                            title: 'provinceId',
                            edit: 'text',
                            templet: function (res) {
                                return '<em>' + res.provinceId + '</em>'
                            }
                        }
                        , {field: 'city', width: 100, title: '城市'}
                        , {field: 'cityId', title: 'CityId', minWidth: 100}
                        , {field: 'isp', title: 'ISP', width: 100}
                        , {field: 'desc', title: '运营商地址', width: 150}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                    ]]
                    ,
                    page: true
                });
                table.on('toolbar(test)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'getCheckData':
                            var data = checkStatus.data;
                            layer.alert(JSON.stringify(data));
                            break;
                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：' + data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选' : '未全选');
                            break;

                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    }
                    ;
                });
                table.on('tool(test)', function (obj) {
                    var data = obj.data;
                    //console.log(obj)
                    if (obj.event === 'del') {
                        layer.confirm('真的删除行么', function (index) {
                            obj.del();
                            layer.close(index);
                        });
                    } else if (obj.event === 'edit') {
                        layer.prompt({
                            formType: 2
                            , value: data.provinceId
                        }, function (value, index) {
                            obj.update({
                                provinceId: value
                            });
                            layer.close(index);
                        });
                    }
                });
            });
        </script>
</body>
</html>